<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.5, maximum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <title>js应用测试</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<div style="position: fixed;right: 0;bottom: 0;left: 0;z-index: 10;">
    <div class="display-table">
        <div class="display-table-cellM">
            <div style="width: 50%;height: 30px;background-color: #2ace97;margin-left: auto;
            margin-right: auto;" id="bnt_one" onclick="clickBtn2()">
                <div class="display-table">
                    <div class="display-table-cellM">
                        <p style="color: #ffffff;text-align: center;font-size: 13px;">按钮1</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="js/jquery.min.js"></script>
<script>
    var til = 0;
//    function popup() {
//        this.popupCreat = function (msg,timeTime) {
//            this.msg = msg;
//            this.timeTime = timeTime;
//            var inner = '<div class="popup" id="onlyPopup">' +
//                    '<div class="popup-box">' +
//                    '<div class="display-table">' +
//                    '<div class="display-table-cellM">' +
//                    '<p id= "showtoastp" style="font-size: 15px;color: #ffffff;">' + this.msg + '</p>' +
//                    '</div></div></div></div>';
//            clickBtn(this.timeTime);
//            $('body').after(inner);
//            console.log(til);
//        }
//    }
    var canshow = true;
    var cannum = true;
    var toasts = new Array();
    function showToast(msg,timeout){
        console.log(msg,timeout);
        if(canshow) {
            canshow = false;
            var toastp = $("#showtoastp");
            console.log(toastp.length);
            if (!toastp||toastp.length==0) {
                console.log("添加元素",!toastp);
                var inner = '<div style="position: fixed;top: 0;right: 0;left: 0;bottom: 0;" id="onlyPopup">' +
                        '<div style="display: table;width: 100%;height: 100%;">' +
                        '<div style="display: table-cell;vertical-align: middle;">' +
                        '<div style="width: 100px;background-color: rgba(0,0,0,0.78);border-radius: 4px;margin-left: auto;margin-right: auto;">' +
                        '<div style="padding: 15px 15px;">'+
                        '<p id= "showtoastp" style="font-size: 13px;color: #ffffff;text-align: center;"></p>' +
                        '</div></div></div></div></div>';
                $('body').after(inner);
                toastp = $("#showtoastp");
            }
            toastp.html(msg);
            $('#onlyPopup').css({
                display: 'block',
                opacity: 1
            });
            if(timeout!=undefined){
                setTimeout(hide,timeout);
            }else {
                cannum = true;
            }
        }else if(cannum){
            toasts.push({"msg":msg,"timeout":timeout});
        }
    }
    function hide(){
        $('#onlyPopup').animate({
            opacity:0
        },300,'swing',function(){
            canshow = true;
            $('#onlyPopup').css('display','none');
            if(toasts&&toasts.length>0){
                cannum = false;
                var msg = toasts.shift();
                showToast(msg.msg,msg.timeout);
            }
        });
    }

    var arr = new Array();
    arr.push({"msg":"第一次哈哈哈哈","timeout":5000});
    arr.push({"msg":"第二次了呵呵呵呵","timeout":10000});
//    arr.push({"msg":"第三次哈哈哈哈","timeout":20000});
//    arr.push({"msg":"第四次啦啦啦啦啦","timeout":5000});

    function clickBtn2(){
        var msg = arr.shift();
        showToast('哈哈哈哈',5000);
//        showToast(msg.msg,msg.timeout)
    }

//    function clickBtn(timeTime) {
//        $('#bnt_one').click(function () {
//            $('#onlyPopup').css({
//                display:'block',
//                top: 0,
//                opacity:1
//            });
//            setTimeout(function () {
//                $('#onlyPopup').animate({
//                    top:'-50px',
//                    opacity:0
//                },300);
//                alert(timeTime);
//            },timeTime);
//            til =til + 1;
//        });
//    }
//    var p1 = new popup();
//    p1.popupCreat('js测试函数',1000);
//    var p2 = new popup();
//    p2.popupCreat('第二个测试函数',2000);
</script>
</html>